<template>
  <div class="index_top">
    <div class="index_top_left">
      <div class="img"></div>
    </div>
    <div class="index_top_right">
      <div class="index_top_right_idBox">
        <el-dropdown trigger="click">
          <span>
            <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
            <span class="userID">赵正炜</span>
            <i class="iconfont icon-sanjiaoxia"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>支部中心</el-dropdown-item>
            <el-dropdown-item>退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
    }
  },
  methods: {
    handleCommand (command) {

    }
  }
}
</script>

<style lang="less"  scoped>
.index_top {
  display: flex;
  height: 150px;
  background: url("../../assets/topbj.jpg"); //这里的地址是用你项目中图片所在的路径为准
  background-repeat: no-repeat; //将图片样式不重复
  background-size: 100% 100%; //设置图片大小
}

.index_top .index_top_left {
  flex: 1;
}

.index_top .index_top_left .img {
  height: 100%;
  background: url("../../assets/index_top.jpg"); //这里的地址是用你项目中图片所在的路径为准
  background-repeat: no-repeat; //将图片样式不重复
  background-size: 80% 80%; //设置图片大小
  position: relative;
  margin: auto;
}

.index_top .index_top_right {
  display: flex;
  flex: 1;
}


.index_top .index_top_right .index_top_right_idBox {
  position: absolute;
  display: flex;
  margin-top: 20px;
  width: 120px;
  height: 50px;
  right: 70px;
  cursor: pointer;
}

.index_top .index_top_right .index_top_right_idBox .userID {
  position: relative;
  color: white;
  left: 55px;
  top: -22px;
}

.icon-sanjiaoxia {
  position: relative;
  color: white;
  left: 60px;
  top: -22px;
}

::v-deep .el-dropdown-menu {
  min-width: 120px;
  position: absolute !important;
  top: 55px !important;
  left: -5px !important;
}
</style>
